<template>
    <div>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="100"></el-table-column>
            <el-table-column label="模块名称" prop="title">
                <template slot-scope="scope">
                    <img :src="scope.row.preview" style="width:45px" class="rounded"/>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="模块名称"></el-table-column>
            <el-table-column prop="name" label="标识" width="200"></el-table-column>
            <el-table-column prop="version" label="版本号" show-overflow-tooltip></el-table-column>
        </el-table>
        <input
            type="hidden"
            v-for="module in multipleSelection"
            name="modules[]"
            :key="module.id"
            :value="module.id"
        />
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: window.modules,
                selected: window.selected,
                multipleSelection: [],
            };
        },
        mounted() {
            this.tableData.map((module) => {
                if (this.selected.includes(module.id)) {
                    this.$refs.multipleTable.toggleRowSelection(module);
                }
            });
        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach((row) => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
        },
    };

</script>
